<template>
	<view>
		<button @click="addNum">{{num}}</button>
		<button @click="goOption" size="mini" type="primary">go选项</button>
		<button @click="goIndex" size="mini">go Index选项</button>
		<navigator url="../options/options?count=5&title=来自life">选项</navigator>
		<view class="list">
			<view class="item" v-for="(item,index) in list" wx:key="index">
				{{item.summary}}
			</view>
		</view>
	</view>

</template>

<script>
	var app = getApp();
	export default {
		created() {
			this.getjok(); //初始化调用获取笑话
		},
		data() {
			return {
				num: 6,
				list: [], //存放数据
				page: 1, //当前页
			}
		},
		onShow() {
			this.num = app.globalData.num
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取数据
			this.getjok();
		},
		// 触底刷新
		onReachBottom() {
			// 触融底更新吧新数据添加到
			// 后面下拉刷新把新数据添加到前面
			this.getjok(2);
		},
		methods: {
			addNum() {
				app.globalData.num++;
				this.num = app.globalData.num
			},
			goOption() {
				uni.navigateTo({
					url: "/pages/options/options?count=10&title=来自JS跳转"
				})
			},
			goIndex() {
				uni.redirectTo({
					url: "/pages/index/index"
				})
			},

			/*
			 * @param {Numder} type = [1]
			 */
			getjok(type = 1) {
				var that = this
				// 01获驭数据
				uni.request({
					url: 'http://dida100.com/mi/list.php', //仅为示例，并非真实接口地址。
					data: {
						page: that.page
					},
					method: 'GET',
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						//02更新数据List 和 page
						if (type === 1) {
							that.list = res.data.result.concat(that.list);
							uni.showToast({
								title: "为您更新了" + res.data.result.length + "条笑话！",
								icon: "none"
							})
						} else {
							this.list = that.list.concat(res.data.result);
						}
						// 更新page （方便下次请求）
						that.page++
					},
					// 成功获取或失败都要停止下拉属性
					complete() {
						// 停止下拉刷新
						uni.stopPullDownRefresh();
					}
				});
				//03更新视图(自动更新)
				//04判断type是否为1，
				//是：新加载数据加到原数据前面
				//否：新加载数据加到原数据后面
			}
		}
	}
	// 目标:展示笑话信息
	// 方法请求笑话信息写在methods中 getjok
	// 方法在哪儿调用呢?created mounted生命周期调用getjok
	// 笑话分页:在data中定义存放笑话的变量List，存放当前页的page
	// 在getJok中更新List和page实现更新视图
</script>

<style>
	.list .item {
		padding: 30rpx;
		border-bottom: 1rpx solid #ccc;
		box-sizing: border-box;
	}
</style>
